<template>
  <div id="DetailCommentInfo">
      <div class="Comment-size"> 
          <table>
     <tr v-for="(item, index) in paramInfo.rule.tables[0]" :key="index">
        <td v-for="(item, index) in paramInfo.rule.tables[0][index]" :key="index">
          {{item}}
        </td>
         </tr> 
     </table>
      </div>
      <div class="product_info">
          <table>
          <tr v-for="(item, index) in paramInfo.info.set" :key="index">
                  <td class="key">{{item.key}}</td>
                  <td class="value">{{item.value}}</td>
          </tr>
          </table>
      </div>
  </div>
</template>

<script>
export default {
name:"DetailCommentInfo",
props:{
    paramInfo:Object,
    default(){
        return{};
    }
}
}
</script>

<style>
#DetailCommentInfo{
margin-bottom: 300px;
}
.Comment-size tr{
     display: inline-block;
     border-bottom: 1px solid rgba(100,100,100,.1);
     height: 40px;
     line-height: 40px;
}
.Comment-size tr td{
    display: inline-block;
    width: 50px;
    text-align: left;
    font-size: 16px;
    color: #6a6464;
}
.Comment-size tr td:nth-child(n+2){
   
    margin-left: 50px;
}
.product_info{
    font-size: 14px;
}
.product_info  tr{
     display: block;
     border-bottom: 1px solid rgba(100,100,100,.1);
     height: 40px;
     line-height: 40px;
}
.product_info .key{
    color: #6a6464; 
    margin-right: 50px;
}
.product_info .value{
    color: #ff6699; 
    padding-left: 40px;
}
</style>